<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动</title>

    <style>

        .d{
            width: 200px;
            height: 200px;
        }

        .d1{
            background-color: cadetblue;
            /* float浮动 right右边 一旦浮动起来，将会脱离原来的文档流 */
            float: right;
        }

        .d2{
            background-color: lightcoral;
            float: left;
        }

        .d3{
            background-color: olive;
            /* 清除浮动 */
            clear: both;
        }

        ul li{
            /* 清除原来li的样式 */
            list-style: none;
            float: left;
            margin-left: 30px;
        }

        a{
            text-decoration: none;
            color: orange;
        }


    </style>

</head>
<body>

    <div class="d d1"></div>
    <div class="d d2"></div>
    <div class="d d3"></div>


    <ul>
        <li><a href="#">天猫国际</a></li>
        <li><a href="#">天猫小店</a></li>
        <li><a href="#">天猫超市</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>

</body>
</html>